<template>
    <el-dialog
        title="学习路径列表"
        :visible.sync="visible"
        :modal-append-to-body="false"
        width="70%">
        <el-form :inline="true">
            <el-form-item label="类型" prop="type">
                <el-select
                    v-model="form.type"
                    filterable
                    clearable>
                    <el-option
                        v-for="item in typeOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关键词" prop="name">
                <el-input v-model="form.name" placeholder="搜索学习路径名称" class="input-width"/>
            </el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form>
        <el-table :data="data">
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="封面">
                <template slot-scope="{row}">
                    <img :src="row.img" class="logo w-8" v-if="row.img"/>
                </template>
            </el-table-column>
            <el-table-column label="类型" width="250">
                <template slot-scope="{row}">
                    <el-tag v-for="(v, i) in transType(row.type)" :key="i" class="m-1">
                        {{ v }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button
                    type="primary"
                    @click="onAddClick(row)"
                    v-if="!isChoiced(row)">选择</el-button>
                    <el-button
                    type="success"
                    disabled
                    @click="onAddClick(row)"
                    v-else>已选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="totalElements > 0" class="footer">
            <pagination
            ref="pagination"
            :currentPage="form.page"
            :pageSize="form.size"
            :handleCurrentChange="onCurrentChange"
            :handlePageSizeChange="onPageSizeChange"
            :totalElements="totalElements"
            ></pagination>
        </div>
    </el-dialog>
</template>

<script>
import Pagination from '../base/Pagination';

export default {
    components: {
        Pagination,
    },
    filters: {
        typeFilter: function (value) {
            if (!value) return '';
            const options = ['岗位角色', '学习计划', '专题'];
            const typeList = JSON.parse(value);
            const types = typeList.map(type => options[(type - 1)]);
            return types.join(', ');
        },
    },
    props: ['list', 'companyId'],
    data() {
        return {
            visible: false,
            loading: false,
            form: {
                page: 1,
                size: 20,
                name: '',
                type: '',
                defineCompanyId: null,
                status: true,
            },
            totalElements: 0,
            typeOptions: [
                {id: 1, name: '岗位角色'},
                {id: 2, name: '学习计划'},
                {id: 3, name: '专题'},
                {id: 4, name: '学习任务'},
            ],
            data: [],
        };
    },
    watch: {
        visible(val) {
            if (!val) {
                this.resetForm();
            } else {
                this.fetchData();
            }
        },
    },
    computed: {},
    methods: {
        open() {
            this.visible = true;
            if (this.companyId !== undefined) {
                this.form.defineCompanyId = this.companyId;
            }
        },
        close() {
            this.visible = false;
        },
        onAddClick(row) {
            this.$emit('addLabel', row);
        },
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetFilters() {
            this.$refs.form.resetFields();
        },
        onCurrentChange(val) {
            this.form.page = val;
            this.fetchData();
        },
        onPageSizeChange(val) {
            this.form.size = val;
            this.form.page = 1;
            this.fetchData();
        },
        fetchData() {
            this.loading = true;
            API.get('label', {params: this.form}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        resetForm() {
            this.form.page = 1;
            this.form.name = '';
            this.form.type = '';
        },
        transType(value) {
            if (!value) return [];
            const options = ['岗位角色', '学习计划', '专题', '学习任务'];
            const typeList = JSON.parse(value);
            const types = typeList.map(type => options[(type - 1)]);
            return types;
        },
        isChoiced({id}) {
            return this.list.includes(id);
        },
    },
    created() {
    },
};
</script>
